<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .fir {
        margin-top: 20px;
        margin-left: 160px;
      }
      .mck {
        width: 25px;
        height: 25px;
        vertical-align: middle;
      }
      main {
        width: 1190px;
        margin: 0 auto;
      }
      main .ct {
        position: relative;
        line-height: 24px;
        margin-top: 20px;
        background-color: #cecece52;
        border: 1px solid #cecece97;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
      main .ct .ck {
        width: 20px;
        height: 20px;
      }
      main .ct .del {
        font-size: 20px;
        position: absolute;
        right: 15px;
        top: 15px;
        text-align: center;
        width: 25px;
        height: 25px;
        line-height: 25px;
        background-color: red;
        color: white;
        cursor: pointer;
      }

      main .empty {
        width: 500px;
        height: 50px;
        text-align: center;
        font-size: 32px;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <p class="fir">
      全选：<input type="checkbox" class="mck" />　<button>删除选中</button>
    </p>
    <main></main>

    <script src="axios.js"></script>
    <script src="axios封装.js"></script>
    <script src="cookie的封装.js"></script>

    <script>
      let main = document.querySelector("main");
      async function fn() {
        let resData = await (
          "http://localhost:8888/cart/list",
          {
            id: localStorage.getItem("pid"),
          },
          { username: "Authorization", password: localStorage.getItem("token") }
        );
        // console.log(token);
        console.log(resData.inp);

        if (resData.code == 1) {
          let html = "";
          resData.cart.forEach((element) => {
            html += `
                <div class="ct">
                    <input type="checkbox" class="ck" />
                    <img src="${element.img_small_logo}" />
                    <p>${element.title}</p>
                    <p>单价：${element.current_price}</p>
                    <p>数量：${element.cart_number}</p>
                    <p>总价：${element.cart_number * element.current_price}</p>
                    <span class="del" data-id="${element.goods_id}">×</span>
                </div>
                `;
          });
          main.innerHTML = html;
        } else {
          // location.href = "03login.html";
        }

        /* ---------------------修改全部商品选中状态-------------------------- */
        let mck = document.querySelector(".fir .mck");
        let ck = document.querySelectorAll(".ct .ck");
        let delBtn = document.querySelector(".fir button");
        mck.onclick = function () {
          ck.forEach((ele) => {
            ele.checked = mck.checked;
          });
          if (mck.checked == true) {
            fm();
          }
          if (mck.checked == false) {
            fck();
          }
        };
        for (let i = 0; i < ck.length; i++) {
          ck[i].onclick = function () {
            let cked = document.querySelectorAll(".ck:checked");
            if (cked.length == ck.length) {
              mck.checked = true;
              fm();
            } else {
              mck.checked = false;
            }
            if (cked.length == 0) {
              fck();
            }
          };
        }
        async function fm() {
          let ckdata = await post(
            "http://localhost:8888/cart/select/all",
            {
              id: localStorage.getItem("pid"),
              type: 1,
            },
            {
              username: "Authorization",
              password: localStorage.getItem("token"),
            }
          );
          console.log(ckdata);
        }
        async function fck() {
          let nckdata = await post(
            "http://localhost:8888/cart/select/all",
            {
              id: localStorage.getItem("pid"),
              type: 0,
            },
            {
              username: "Authorization",
              password: localStorage.getItem("token"),
            }
          );
          console.log(nckdata);
        }

        /* -----------------删除选中商品-------------------------------------- */

        delBtn.onclick = function () {
          async function dl() {
            let deldata = await get(
              "http://localhost:8888/cart/remove/select",
              {
                id: localStorage.getItem("pid"),
              },
              {
                username: "Authorization",
                password: localStorage.getItem("token"),
              }
            );
            console.log(deldata);
            location.reload();
          }
          dl();
        };

        /* ---------------------删除商品-------------------------------------- */

        let del = document.querySelectorAll(".del");
        del.forEach((ele) => {
          ele.onclick = function () {
            async function foo() {
              let delData = await get(
                "http://localhost:8888/cart/remove",
                {
                  id: localStorage.getItem("pid"),
                  goodsId: ele.dataset.id,
                },
                {
                  username: "Authorization",
                  password: localStorage.getItem("token"),
                }
              );
              //   console.log(delData);
              location.reload();
            }
            foo();
          };
        });
        if (resData.cart.length == 0) {
          main.innerHTML =
            "<p class='empty'>空空如也~~<br>快快选择心仪的宝贝加入吧</p><a href='../jdcs.html'>回到首页</a>";
        }
      }
      fn();
     
      
    </script>
  </body>
</html>
